<template>
  <div class="app-container2">
    <!--工具栏-->
    <div class="head-container" v-loading="tableloding">
      <el-tabs v-model="titlename">
        <el-tab-pane label="转出人员信息" name="info">
          <content-block label="查询条件">

            <el-form ref="queryForm1" :model="queryForm1" label-width="180px" class="search-form">
              <el-col :span="8">
                  <el-form-item label="转出险种" :rules="[ { required: true, message: '转出险种不能为空'},]" >
                    <el-select v-model="queryForm1.aae140" placeholder="请选择"  style="width:80%"   @change="changeAae140" >
                      <el-option v-for="item in dict.aae140.filter(m  =>['110','120','180'].includes(m.value))" :key="item.id" :value="item.value" :label="item.label" />
                    </el-select>
                  </el-form-item>
            </el-col>
              <el-col :span="8">
                <el-form-item label="个人编号" :rules="[ { required: true, message: '转出险种不能为空'},]" >
                  <el-input v-model="queryForm1.aac001"  ></el-input>
                </el-form-item>
              </el-col>
            </el-form>

            <el-button type="primary" size="mini"  icon="el-icon-circle-check" style="float:right;margin-right: 20px" @click="toAdd">保存</el-button>
            <el-button  class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" style="float:right;margin-right: 20px" @click="resetQuery(1)">重置</el-button>
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" style="float:right;margin-right: 20px" @click="toQuery1">搜索</el-button>

          </content-block>
          <content-block label="转出人员支付表信息">
            <el-tabs v-model="activeName">
              <el-tab-pane label="企业转企业" name="tab110_110" v-if="tab_visible_110">
                <el-table ref="table1" v-loading="tableloding1"  :data="tableData1" size="small" border style="width: 100%;" height="460px"  :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px"/>

                </el-table>

              </el-tab-pane>
              <el-tab-pane label="企业转机关" name="tab110_120" v-if="tab_visible_110">
                <el-table ref="table2" v-loading="tableloding2"  :data="tableData2" size="small" border style="width: 100%;"  height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px"/>

                </el-table>
              </el-tab-pane>
              <el-tab-pane label="企业转城乡" name="tab110_170" v-if="tab_visible_110">
                <el-table ref="table3" v-loading="tableloding3"  :data="tableData3" size="small" border style="width: 100%;" height="460px"  :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px"/>

                </el-table>
              </el-tab-pane>
              <el-tab-pane label="机关转企业" name="tab120_110" v-if="tab_visible_120">
                <el-table ref="table4" v-loading="tableloding4"  :data="tableData4" size="small" border style="width: 100%;"  height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px"/>

                </el-table>
              </el-tab-pane>
              <el-tab-pane label="机关转机关" name="tab120_120" v-if="tab_visible_120">
                <el-table ref="table5" v-loading="tableloding5"  :data="tableData5" size="small" border style="width: 100%;"height="460px"   :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px"/>

                </el-table>
              </el-tab-pane>
              <el-tab-pane label="年金转年金" name="tab180_180" v-if="tab_visible_180">
                <el-table ref="table6" v-loading="tableloding6"  :data="tableData6" size="small" border style="width: 100%;" height="460px"  :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="180px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="180px"/>
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center"  />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="180px"/>
                </el-table>
              </el-tab-pane>
            </el-tabs>

          </content-block>
        </el-tab-pane>
        <el-tab-pane label="成功列表" name="info2">
          <content-block label="查询条件">

            <el-form ref="queryForm2" :model="queryForm2" label-width="180px" class="search-form">
              <el-row :gutter="20">

                <el-col :span="8">
                  <el-form-item label="转出险种" :rules="[ { required: true, message: '险种'},]">
                    <el-select v-model="queryForm2.aae140" placeholder="请选择"  style="width:80%"  filterable  >
                      <el-option v-for="item in dict.aae140.filter(m  =>['110','120','180'].includes(m.value))" :key="item.id" :value="item.value" :label="item.label" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="表单编号" >
                    <el-input v-model="queryForm2.aaz618"  ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="个人编号" >
                    <el-input v-model="queryForm2.aac001"  ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <el-button  class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left"  style="float:right;margin-right: 20px" @click="resetQuery(2)">重置</el-button>
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" style="float:right;margin-right: 20px" @click="toQuery2">搜索</el-button>
          </content-block>
          <content-block label="转出人员支付表信息">

                <el-table ref="table6" v-loading="tableloding7"  :data="tableData7" size="small" border style="width: 100%;"  height="460px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange" @row-dblclick="handleRowDblClick">

                  <el-table-column prop="baz244" label="支付表打印" align="center" header-align="center" width=220px />
                  <el-table-column prop="aaz618" label="表单编号" align="center" header-align="center" width="300px"/>
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="300px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="count" label="转出人数" align="center" header-align="center" width="300px"/>
                  <el-table-column prop="aae719" label="转移金额" align="center" header-align="center" />
                </el-table>
          </content-block>
        </el-tab-pane>
        <el-tab-pane label="交接表明细信息" name="info3">
          <content-block label="查询条件">

            <el-form ref="queryForm3" :model="queryForm3" label-width="180px" class="search-form">
              <el-row :gutter="20">

                <el-col :span="8">
                  <el-form-item label="转出险种" :rules="[ { required: true, message: '险种'},]">
                    <el-select v-model="queryForm3.aae140" placeholder="请选择"  style="width:80%"   >
                      <el-option v-for="item in dict.aae140.filter(m  =>['110','120','180'].includes(m.value))" :key="item.id" :value="item.value" :label="item.label" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="表单编号" >
                    <el-input v-model="queryForm3.aaz618"  ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="个人编号" >
                    <el-input v-model="queryForm3.aac001"  ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <el-button  class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" style="float:right;margin-right: 20px" @click="resetQuery(3)">重置</el-button>
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" style="float:right;margin-right: 20px" @click="toQuery3">搜索</el-button>
          </content-block>
          <content-block label="转出人员支付表信息">
                <el-table ref="table8" v-loading="tableloding8"  :data="tableData8" size="small" border style="width: 100%;" height="460px"  :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="baz244" label="单据id" align="center" header-align="center" width="180px" />
                  <el-table-column prop="aaz618" label="表单编号" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aae002" label="费款所属期" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae140" label="险种" align="center" header-align="center" width="150px">
                    <template slot-scope="scope">
                      {{ dict.label.aae140[scope.row.aae140] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="aaz010" label="人员编号" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aac147" label="社会保障号码" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aae734" label="姓名" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aab004" label="单位名称" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aic083" label="个人账户基金转移额" align="center" header-align="center" width="150px"/>
                  <el-table-column prop="aic084" label="统筹基金转移额" align="center" header-align="center" width="150px" />
                  <el-table-column prop="aae719" label="转出基金总额" align="center" header-align="center" width="150px"/>
                </el-table>

          </content-block>
        </el-tab-pane>
      </el-tabs>


    </div>

  </div>
</template>

<script>
import ic58api, { querycount, querydetail } from '@/views/ynsb_comm/ic58/js/transferIc58'

import contentBlock from '@/components/labers/contentBlock.vue'
import PersonRpc from '@/views/ynsb_comm/comm/module/personRpc.vue'
import crudBasicAc01 from '@/views/ynsb_comm/ac01/basicAc01'
import { downloadFile } from '@/utils'
import bottomFixed from '@/components/labers/bottomFixed.vue'

export default {
  name: 'AccountIc58',
  components: { bottomFixed, PersonRpc, contentBlock },
  dicts: ['aae140', ''],
  data() {
    return {

      queryForm1: {
        aac001: '', // 人员编号
        aae140: '' // 转移制度方向
      },
      queryForm2: {
        aaz618: '', // 人员编号
        aae140: '' // 转移制度方向
      },
      queryForm3: {
        aaz618: '', // 人员编号
        aae140: '', // 转移制度方向
        aac001: '', // 转移制度方向
      },

      selectedRows: [] , // 存储选中的行数据
      tableData1:[],//
      tableData2:[],//
      tableData3:[],//
      tableData4:[],//
      tableData5:[],//
      tableData6:[],//
      tableData7:[],//
      tableData8:[],//

      tableloding1:false,
      tableloding2:false,
      tableloding3:false,
      tableloding4:false,
      tableloding5:false,
      tableloding6:false,
      tableloding7:false,
      tableloding8:false,

      tab_visible_110:true,
      tab_visible_120:false,
      tab_visible_180:false,

      activeName: 'tab110_110',
      titlename: 'info',

      page:{
        //页码
        page:0,
        //每页数据条数
        size:10,
        //总数
        total:0
      },
    }
  },
  methods: {


    personRpcCallBack(item) {
      this.searchForm = {
        aac001: item.aac001,
        aac003: item.aac003
      }
    },
    search() {
      // 假设查询的数据
      if (this.searchForm.aac001 !== '' && this.searchForm.aac001 !== null) {
        crudBasicAc01.getAc01Ac02({ ...this.searchForm }).then(res => {
          this.cardPerson=res
          let filteredValues = this.cardPerson.filter(item => item.aae140 === "180" && item.aac008==='1')
          if(filteredValues.length==0){
            this.$message('未查询到该人员职业年金有效参保信息');
            return
          }
          this.aaz159=filteredValues[0].aaz159
          this.aac001=filteredValues[0].aac001
          crudAccountId40.getId40({ aaz159:filteredValues[0].aaz159 }).then(res2 => {
            let ls=res2
            if(ls.length>0){
              this.$message('该人员已经存在有效的年金账户信息，请勿重复添加');
              return
             }
            })
          })

        }
      },



    changeAae140(val){

      if(val=='110'){
        this.activeName="tab110_110"
        this.tab_visible_110=true
        this.tab_visible_120=false
        this.tab_visible_180=false

      }
      if(val=='120'){
        this.activeName="tab120_110"
        this.tab_visible_110=false
        this.tab_visible_120=true
        this.tab_visible_180=false

      }
      if(val=='180'){
        this.activeName="tab180_180"
        this.tab_visible_110=false
        this.tab_visible_120=false
        this.tab_visible_180=true
      }


    },


    toAdd(){
      if(this.selectedRows.length==0){
        this.$notify({
          title: '请勾选要汇总的数据',
          type: 'error'
        });
        return
      }

      ic58api.save(JSON.stringify(this.selectedRows)).then(res => {
        this.$notify({
          title: '保存成功',
          type: 'success'
        });
        this.titlename="info2"
        this.search2()

      })

    },





    // 监听选中变化
    handleSelectionChange(val) {
      this.selectedRows = val
    },

    toQuery1(){

      this.$refs.queryForm1.validate(valid => {
        if (valid) {
          let data = {...this.queryForm1}
          data.type = this.activeName

          ic58api.get(JSON.stringify(data)).then(res => {
            if (this.activeName == "tab110_110") {
              this.tableData1 = res

            } else if (this.activeName == "tab110_120") {
              this.tableData2 = res

            } else if (this.activeName == "tab110_170") {
              this.tableData3 = res

            } else if (this.activeName == "tab120_110") {
              this.tableData4 = res
            } else if (this.activeName == "tab120_120") {
              this.tableData5 = res
            } else if (this.activeName == "tab180_180") {
              this.tableData6 = res
            }

            this.tableloding = false
          })
        }else{
          console.log('error submit!!');
          return false;
        }
      })
    },

    toQuery2(){
      this.tableloding7=true
      this.$refs.queryForm2.validate(valid => {
        if (valid) {
          let data = { ...this.queryForm2 }
          ic58api.querycount(JSON.stringify(data)).then(res => {
              this.tableData7 = res
              this.tableloding7 = false
            }
          )
        }
        })

    },

    // 双击行触发的事件
    handleRowDblClick(row) {
      console.log(row, 'row')
      this.aaz618 = row.aaz618 // 获取双击的行数据
      this.titlename="info3"
      setTimeout(() => {
        this.toQuery3()
      }, 500) // 延迟1秒后显示弹窗
    },


    toQuery3(){

      this.tableloding8=true
      this.$refs.queryForm3.validate(valid => {
        if (valid) {
          let data = { ...this.queryForm3 }

      ic58api.querydetail(JSON.stringify(data)).then(res => {
          this.tableData8=res
          this.tableloding8=false
        }
      )
        }
      })


    },





    resetQuery(val){
      if(val=="1"){
      this.queryForm1={}

      }
      if(val=="2"){
        this.queryForm2={}

      }
      if(val=="3"){
        this.queryForm3={}
      }

    },


    // 当前页改变
    pageChangeHandler(e) {
      this.page.page = e
      this.toQuery()
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.page.size = e
      this.page.page = 1
      this.toQuery()
    },
    // 预防删除第二页最后一条数据时，或者多选删除第二页的数据时，页码错误导致请求无数据
    dleChangePage(size) {
      if (this.tableData.length === size && this.page.page !== 1) {
        this.page.page -= 1
      }
    },


  }
}
</script>

<style scoped>
.el-table{
  height: calc(100vh - 550px);
  overflow: auto;
}
</style>
